<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大屏渲染</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>

    <div class="screen-wrapper">
        <div class="three-box" id="three-box"></div>
    </div>

    <div id="scene-container"></div>

    <script type="importmap">
        {
          "imports": {
            "three": "../three/v170/three.module.min.js",
            "GLTFLoader":"../three/v170/GLTFLoader.js",
            "DragControls":"../three/v170/DragControls.js",
            "CSS2DRenderer":"../three/v170/CSS2DRenderer.js",
            "OrbitControls":"../three/v170/OrbitControls.js",
            "lil-gui": "../three/v170/lil-gui.module.min.js"
          }
        }
      </script>

    <script type="module">
        import * as THREE from 'three';
        import { GUI } from 'lil-gui';
        import { OrbitControls } from "OrbitControls";
        import { GLTFLoader } from "GLTFLoader";
        import { DragControls } from "DragControls";
        import { CSS2DRenderer, CSS2DObject } from "CSS2DRenderer";
        console.log(`gltf1.html 76 [THREE版本]`, THREE.REVISION);

        let scene, camera, renderer, controls, isPaused;
        let labelRenderer = null;
        let RotateCube_01 = null;// 旋转立方体

        const raycaster = new THREE.Raycaster();
        const mouse = new THREE.Vector2();
        const texturedPlanes = [];
        const middle_obj = {};

        // 添加纹理的函数
        function addTexturedPlane(obj) {
            const textureLoader = new THREE.TextureLoader();
            const texture = textureLoader.load(obj.imgURL, function (texture) {
                texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
                texture.minFilter = THREE.LinearMipmapLinearFilter;
                texture.magFilter = THREE.LinearFilter;
                texture.generateMipmaps = true;
                texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping;

                // texture.minFilter = THREE.LinearFilter; // 尝试使用线性过滤
                texture.magFilter = THREE.LinearFilter; // 同样使用线性过滤

                const cur_widht = obj.width;
                const cur_height = obj.height;
                const cur_xishu = 0.02;// 缩小的系数
                const geometry = new THREE.PlaneGeometry(cur_widht * cur_xishu, cur_height * cur_xishu); // 根据图片比例设置平面尺寸
                // MeshStandardMaterial
                /* 
                new THREE.MeshBasicMaterial()：创建一个基本的材质，这种材质不考虑光照效果，只考虑材质的颜色和透明度。
                new THREE.MeshLambertMaterial()：创建一个 Lambert 材质，这种材质考虑了光照效果，但只考虑了漫反射，不考虑镜面反射。
                new THREE.MeshPhongMaterial()：创建一个 Phong 材质，这种材质考虑了光照效果，包括漫反射和镜面反射。
                new THREE.MeshToonMaterial()：创建一个卡通材质，这种材质使用离散的颜色来模拟光照效果。
                new THREE.MeshNormalMaterial()：创建一个法线材质，这种材质使用物体的法线来模拟光照效果。
                new THREE.MeshDepthMaterial()：创建一个深度材质，这种材质使用物体的深度来模拟光照效果。
                new THREE.MeshBasicMaterial()：创建一个基本材质，这种材质不考虑光照效果，只考虑材质的颜色和透明度。
                new THREE.MeshPhysicalMaterial()：创建一个物理材质，这种材质考虑了光照效果，包括漫反射、镜面反射和折射。
                */
                const material = new THREE.MeshBasicMaterial({
                    map: texture,
                    transparent: true, // 允许透明
                    opacity: 1, // 设置不透明度（0.0为完全透明，1.0为完全不透明）
                    side: THREE.DoubleSide, // 设置材质为双面
                    blending: THREE.NormalBlending, // 使用正常混合模式
                    // depthTest: false, // 禁用深度测试
                    // depthWrite: false // 禁止写入深度缓冲
                    metalness: 0, // 设置金属度为 0.5
                    alphaTest: 0.1,// 透明度阈值
                    color: 0xffffff, // 设置材质颜色
                });
                // material.map.colorSpace = 'srgb';// THREE.SRGBColorSpace
                material.map.colorSpace = THREE.SRGBColorSpace;
                console.log(`bgc copy 2.html 62 [THREE.SRGBColorSpace]`, THREE.SRGBColorSpace);

                const plane = new THREE.Mesh(geometry, material);
                plane.material.depthWrite = false;// 该平面在渲染时会写入深度缓冲区

                plane.position.set(obj.x, obj.y, obj.z);
                plane.renderOrder = obj.renderOrder || 0; // 设置渲染顺序

                middle_obj[obj.info.name] = plane;
                scene.add(plane);
            });
        }

        function init() {
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            // camera.rotation.set(0, 0, 0);
            // camera.position.set(10, 10, 10);
            // camera.position.set(5, 10, 12);

            // 设置相机为正视图
            camera.position.set(0, 0, 15);
            camera.lookAt(new THREE.Vector3(0, 0, 0));

            // 创建渲染器
            renderer = new THREE.WebGLRenderer({
                antialias: true,//
                alpha: true,// 设置背景透明
                physicallyCorrectLights: true,// 开启物理光照
                logarithmicDepthBuffer: true,// 开启深度缓存
                powerPreference: "high-performance",// 
            });
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.outputEncoding = THREE.sRGBEncoding;
            document.getElementById('three-box').appendChild(renderer.domElement);

            labelRenderer = new CSS2DRenderer();
            labelRenderer.setSize(window.innerWidth, window.innerHeight);
            labelRenderer.domElement.style.position = 'absolute';
            labelRenderer.domElement.style.top = '0';
            labelRenderer.domElement.style.pointerEvents = 'none';
            document.getElementById('scene-container').appendChild(labelRenderer.domElement);

            // 创建坐标轴辅助对象
            var axesHelper = new THREE.AxesHelper(1000);
            scene.add(axesHelper);

            // 添加控制器
            controls = new OrbitControls(camera, renderer.domElement);
            // 添加平移功能
            controls.enablePan = true;

            // 添加环境光
            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
            scene.add(ambientLight);
            // // 添加平行光
            const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
            // directionalLight.position.set(15, 15, 0);// 设置光源位置
            directionalLight.position.set(20, 20, 10);// 设置光源位置
            scene.add(directionalLight);

            // 窗口调整
            window.addEventListener('resize', () => {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            });

            // 添加键盘事件监听器
            document.addEventListener('keydown', function (event) {
                // 向上平移
                if (event.keyCode === 38) {
                    controls.pan(new THREE.Vector3(0, 1, 0));
                }
                // 向下平移
                else if (event.keyCode === 40) {
                    controls.pan(new THREE.Vector3(0, -1, 0));
                }
            });

            loop();

            // 添加场景背景图
            addTexturedPlane({
                imgURL: './images/souce_05.png',
                width: 1393,
                height: 972,
                x: 0,
                y: 0,
                z: 0,
                renderOrder: 1, // 设置渲染顺序
                info: {
                    name: '背景图'
                }
            })

            // 创建 GUI，设置gui面板的标题
            const gui = new GUI({ 'title': "操作区" });
            const obj = {
                color: '#ff0000',
                speed: 2.5,
                isVisible: true,
                selectedOptions: ['苹果🍎']
            };

            gui.addColor(obj, 'color').onChange((value) => {
                console.log(`bgc.html 191 [value]`, value);
                // sphereMa.color.set(value);
                middle_obj['背景图'].material.color.set(value);
            });
        }


        var skip;
        function loop() {
            skip++;
            requestAnimationFrame(loop);
            if (skip < 3) {
                return;
            } else {
                skip = 0;
            }
            controls.update(); // 更新控制器
            renderer.render(scene, camera); // 渲染场景
            labelRenderer.render(scene, camera); // 渲染标签
        }

        init();
    </script>


</body>

</htm